<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发布段路网</title>
    <link rel="stylesheet" href="../../../css/main.css">
    <script src="../../../mapData/js/jquery.min.js"></script>
    <script type="text/javascript" src="../../../mapData/js/echarts/echarts.js"></script>
</head>
<body>
<div id="renderMap" style="height: 100%;width: 100%;float: left"></div>
</body>
<script type="text/javascript">
    var mapOption;// 将读取的mapOption设置为全局变量，避免在使用该对象的时候重复读取。

    var data = [];

    var mapChart = echarts.init(document.getElementById('renderMap'));// 初始化echarts对象为mapChart

    /*
     * 读取echarts Option配置数据
     */
    $(function()
    {
        getOption();
    });
    /*
     * 读取echarts Option配置数据
     */
    function getOption()
    {
        // echarts配置json文件的地址
        var chartUrl = "../../../config/unique_render_map.json";
        // 读取echartsoption配置
        $.get(chartUrl, function (option)
        {
            mapOption = option;
            getMap();
        });
    }
    /*
     * 读取geo地图数据并注入echarts api
     */
    function getMap()
    {
        // 数据加载项，增强用户体验
        mapChart.showLoading();
        // 地图json文件的地址
        var mapUrl = "../../../mapData/json/IndexRegion_FBD.json";
        // 读取geo地图数据
        $.get(mapUrl, function (json)
        {
            echarts.registerMap("changzhi", json); // 注册地图
            mapOption.series[0].mapType = "changzhi"; // 设置geo坐标系地图名称
            mapOption.series[0].zoom = 0; // 设置地图缩放等级
            mapOption.series[0].center = [113.101211,36.188388];// 设置地图中心点
            mapOption.series[0].data = data; // 设置业务数据

            mapChart.setOption(mapOption);// 把加工好的mapOption注入echarts api。
            // 数据加载项，增强用户体验
            mapChart.hideLoading();
        });
    }
</script>
</html>